import React, { useEffect, FC, memo } from 'react';
import styles from './index.less';
import useHoxModel from '../../useHoxModel';
import IconFont from '@/components/IconFont';
import classnames from 'classnames';
import { Spin, Modal } from 'antd';
import { useModel } from 'umi';
import { modelName } from '../../index';
import ConfirmProps from '@/components/CommonModal/Confirm';
const { confirm } = Modal;

interface Props {}
const DoorGroup: FC<Props> = ({}) => {
  const {
    dispatch,
    doorGroupList = {},
    selectedDoorGroup,
    getDoorGroupList,
    getDoorGroupListLoading,
    deleteDoorGroup,
  } = useHoxModel((model) => [
    model.getDoorGroupListLoading,
    model.selectedDoorGroup,
    model.doorGroupList,
  ]);
  const { showModal } = useModel('useCommonModal', (model) => ({ showModal: model.showModal }));
  useEffect(() => {
    getDoorGroupList();
  }, []);

  return (
    <div className={styles['door-group-wrap']}>
      <Spin spinning={getDoorGroupListLoading}>
        {(doorGroupList?.list || []).map((item: any, index: number) => {
          return (
            <div
              key={index.toString(36) + index}
              className={classnames(
                styles['door-group-item'],
                selectedDoorGroup === item.id && styles['active'],
              )}
              onClick={() => {
                dispatch({ selectedDoorGroup: item.id });
              }}
            >
              <div className={styles['door-group-item-name']}>{item.name}</div>
              <div
                className={styles['door-group-item-edit']}
                onClick={async (e) => {
                  e.stopPropagation();
                  showModal(modelName + 'door-group-edit');
                  dispatch({ doorGroupInfo: item });
                }}
              >
                <IconFont type={'iconbianji1'} />
              </div>
              <div
                className={styles['door-group-item-delete']}
                onClick={(e) => {
                  e.stopPropagation();
                  confirm({
                    ...new ConfirmProps(),
                    async onOk() {
                      if (selectedDoorGroup === item.id) {
                        dispatch({ selectedDoorGroup: null });
                      }
                      await deleteDoorGroup({ id: item.id });
                      await getDoorGroupList();
                    },
                  });
                }}
              >
                <IconFont type={'iconshanchu1'} />
              </div>
            </div>
          );
        })}
      </Spin>
    </div>
  );
};

export default memo(DoorGroup);
